Skip to content

fix(canvas/a11y): aria-hidden on decorative SVGs + MissingKeysModal semantics - #1594

Merged
molecule-ai[bot] merged 1 commit into
stagingfrom
fix/canvas-a11y-clean
Apr 22, 2026
Merged

molecule-ai[bot] merged 1 commit into
stagingfrom
fix/canvas-a11y-clean

Conversation

@molecule-ai

@molecule-ai molecule-ai Bot commented Apr 22, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds aria-hidden="true" to purely decorative SVG icons and improves MissingKeysModal accessibility:

  • DeleteCascadeConfirmDialog: warning triangle SVG — button already has adjacent text content; icon is purely decorative
  • Toolbar: aria-hidden on 4 decorative SVGs — stop-all (button has aria-label), restart-pending (aria-label), search (visible text + kbd shortcut), help (aria-expanded + text)
  • MissingKeysModal: role="dialog", aria-modal="true", aria-labelledby on container; id="missing-keys-title" on heading; requestAnimationFrame focus management via useRef (replaces autoFocus={index===0})
  • CreateWorkspaceDialog: removes redundant aria-describedby={undefined}

Test plan

  • Vitest: 813/813 pass
  • Manual: open canvas toolbar and cascade delete dialog, verify screen reader skips decorative icons and reads button labels

WCAG 2.1 SC 1.1.1

Adding aria-hidden="true" is the correct pattern for purely decorative inline SVGs — screen readers skip the icon and users hear the adjacent accessible label instead.


Extracted from PR #1550 (which was bloated by force-updated staging history). Clean, focused commit.

…al semantics

- DeleteCascadeConfirmDialog: aria-hidden on warning triangle SVG (button
  already has adjacent text content; icon is purely decorative)
- Toolbar: aria-hidden on 4 decorative SVGs (stop-all, restart-pending,
  search, help) — buttons all have aria-label/aria-expanded/text
- MissingKeysModal: role="dialog" aria-modal="true" aria-labelledby on
  container, id="missing-keys-title" on heading, requestAnimationFrame
  focus management via useRef (replaces autoFocus={index===0})
- CreateWorkspaceDialog: remove redundant aria-describedby={undefined}

WCAG 2.1 SC 1.1.1 — screen readers skip purely-presentational icons.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@molecule-ai

molecule-ai Bot commented Apr 22, 2026

Copy link
Copy Markdown
Contributor Author

Core-QA Review ✅ — Clean a11y fix. aria-hidden on decorative SVGs is correct (buttons already have aria-label or adjacent text). MissingKeysModal gets proper dialog semantics (role=dialog, aria-modal, focus management via useRef). Removal of aria-describedby={undefined} is a net improvement. +23/-11, small scope. Approved for merge.

@molecule-ai
molecule-ai Bot merged commit 6bd1691 into staging Apr 22, 2026
12 checks passed
@HongmingWang-Rabbit
HongmingWang-Rabbit deleted the fix/canvas-a11y-clean branch April 24, 2026 00:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants